<template>
  <div class="bus-list page">
    <div class="time-filter">
      <div class="white-block">
        <span class="name" >选择时间</span>
        <span class="time">{{dateStart}} -- {{dateEnd}}</span>
        <span class="btn" @click="dateShow=true">选择</span>
      </div>
    </div>
    <div v-if="top"  @click="showUsers" class="users">
      <div class="white-block">
        <span class="label">人员筛选</span>
        <span class="name">{{userName}}</span>
        <span class="btn" style="color: red" @click.stop="resetUser" v-if="userId">重置</span>
        <span class="btn" style="color: red" v-else>选择</span>
      </div>
    </div>
    <div class="users">
    <div class="white-block" @click="showStatus">
      <span class="label">状态筛选</span>
      <span class="name">{{status}}</span>
      <span class="btn" style="color: red" @click.stop="resetStatus" v-if="status">重置</span>
      <span class="btn" style="color: red" v-else>选择</span>
    </div>
    </div>
    <div class="sum" v-if="sum">本年度已经申请{{sum}}元</div>
    <calendar mode="during"  @change="changeDate"  :show.sync="dateShow"  />
    <cube-scroll v-if="items.length>0">
      <div class="list" v-if="items">
        <div class="item" v-for="(item,index) in items" :key="item.costApply.id">
<!--          <div class="line">-->
<!--            <span class="text">申请单号 :</span>-->
<!--            <span class="value">{{item.apply.orderNo}}</span>-->
<!--          </div>-->
          <div class="line">
            <span class="text">申请时间 : </span>
            <span class="value">{{parseTime(item.costApply.time)}}</span>
          </div>
          <div class="line">
            <span class="text">费用名称 : </span>
            <span class="value">{{item.costApply.title}}</span>
          </div>
          <div class="line">
            <span class="text">使用单位 : </span>
            <span class="value">{{item.costApply.unit}}</span>
          </div>
          <div class="line">
            <span class="text">费用金额 : </span>
            <span class="value">{{item.costApply.amount}}元</span>
          </div>
          <div class="line">
            <span class="text">支付方式 : </span>
            <span class="value">{{item.costApply.payWay}}</span>
          </div>
          <div class="line">
            <span class="text">支付时间 : </span>
            <span class="value">{{parseTime(item.costApply.payTime)}}</span>
          </div>
          <div class="line">
            <span class="text">申请人 :</span>
            <span class="value">{{item.user.name}}  {{item.user.mobile}}</span>
          </div>
          <div class="line" @click="turn(item.costApply.id)">
            <span class="text">申请明细 :</span>
            <span class="value" style="color: #ff0000">点击查看</span>
          </div>
          <div class="line" v-if="item.costApply.adminName">
            <span class="text">审核状态 :</span>
            <span class="value">{{item.costApply.adminName}}已审核</span>
          </div>
          <div class="line">
            <span class="text">状态 :</span>
            <span class="value">{{statusEnum[item.costApply.status]}}</span>
          </div>
          <div class="line" v-if="item.costApply&&item.costApply.status==2">
            <span class="text">拒绝原因 :</span>
            <textarea disabled  :value="item.costApply.remark" class="area" name="" id=""  ></textarea>
          </div>
          <div class="btns" v-if="uid!=item.costApply.adminId&&uid!=item.user.id&&item.costApply.status===0">
            <div class="btn no" @click="no(item.costApply.id,index)">
              拒绝
            </div>
            <div class="btn yes" @click="check(1,item.costApply.id,index)">
              同意
            </div>
          </div>
<!--          <div class="line" v-if="item.apply.status===1">-->
<!--            <span class="text">物流单号 :</span>-->
<!--            <span class="value">{{item.apply.logNo}}</span>-->
<!--          </div>-->
        </div>
      </div>
    </cube-scroll>
    <div class="noData" v-else @click="back()">
      没有数据 点击返回>>
    </div>
  </div>
</template>

<script>
import { parseTime } from '../../../util/time'
import { checkCost, listCost } from '../../../api/apply'
import { gtBusUser } from '@/api/user'
import { mapState } from 'vuex'
import { showCorrect, showPrompt } from '@/dialog'
export default {
  created () {
    if (this.$route.query.top) {
      this.top = parseInt(this.$route.query.top)
    } else {
      this.top = 0
    }
    if (this.top) {
      this.gtBusUser()
    }
    this.getCost()
  },
  computed: {
    ...mapState({
      uid: state => state.user.id
    })
  },
  methods: {
    no (id, index) {
      showPrompt('拒绝原因').then(res => {
        this.remark = res
        this.check(2, id, index)
      })
    },
    check (status, id, index) {
      checkCost(id, status, this.remark).then(res => {
        this.items[index].costApply = res.data
        showCorrect('操作成功')
      })
    },
    back () {
      this.$router.back()
    },
    gtBusUser () {
      gtBusUser().then(res => {
        this.users = res.data
      })
    },
    resetUser () {
      this.userId = null
      this.userName = null
      this.getCost()
    },
    resetStatus () {
      this.status = null
      this.getCost()
    },
    showUsers () {
      const users = Object.keys(this.users).map(k => {
        const children = this.users[k].map(v => {
          const m = { text: v.name, value: v.id }
          return m
        })
        const r = { text: k, value: k, children }
        return r
      })
      if (!this.picker) {
        this.picker = this.$createCascadePicker({
          title: '选择用户',
          data: users,
          onSelect: this.selectUser
        })
      }
      this.picker.show()
    },
    showStatus () {
      const res = this.statusEnum.map(m => {
        return { text: m, value: m }
      })
      if (!this.picker) {
        this.picker = this.$createCascadePicker({
          title: '选择状态',
          data: res,
          onSelect: this.selectStatus
        })
      }
      this.picker.show()
    },
    selectUser (selectedVal, selectedIndex, selectedText) {
      this.userId = selectedVal[1]
      this.userName = selectedText[1]
      this.getCost()
    },
    selectStatus (selectedVal, selectedIndex, selectedText) {
      this.status = selectedText.join()
      this.getCost()
    },
    getCost () {
      listCost(this.top, parseTime(this.dateStart), parseTime(this.dateEnd), this.userId).then(res => {
        this.items = res.data.reverse()
        this.sum = res.extra.amount
        if (this.status) {
          this.items = this.items.filter(item => {
            return this.statusEnum[item.costApply.status] == this.status
          })
        }
      })
    },
    changeDate (dates) {
      if (dates.length === 2) {
        this.dateStart = dates[0].toDate().toLocaleDateString()
        this.dateEnd = dates[1].toDate().toLocaleDateString()
        this.dateShow = false
        this.getCost()
      }
    },
    turn (id) {
      this.$router.push({
        path: '/apply/cost/apply',
        query: {
          id: id
        }
      })
    },
    parseTime (time) {
      return parseTime(time, '{y}.{m}.{d}')
    }
  },
  data () {
    return {
      status: null,
      sum: 0.00,
      users: [],
      userId: null,
      userName: null,
      dateStart: null,
      dateEnd: null,
      dateShow: false,
      remark: null,
      items: [],
      statusEnum: ['待审核', '通过', '拒绝', '已支付', '已核销']
    }
  }
}
</script>

<style scoped lang="stylus">
.bus-list
  background-color #F5F4F7
  padding 0 0
  .sum
    margin-top 10px
    font-size 16px
    display flex
    align-items center
    justify-content center
    color  red
  .time-filter
    margin-top 20px
    padding 0 20px
    .white-block
      display flex
      align-items center
      justify-content space-between
      align-items center
      color #55545D
      font-size 16px
      padding 0 10px
      .btn
        color red
  .users
    padding 0 20px
    margin-top 10px
    .white-block
      padding 0 10px
      display flex
      align-items center
      justify-content space-between
      font-size 16px
      color #55545D
  .noData
    dpr-font(14Px)
    color #55545D
    display flex
    align-items center
    justify-content center
    height 100%
  .list
    padding 10px 20px
    padding-bottom 160px
    .item
      overflow hidden
      margin-top 10px
      padding 20px 20px 0 20px
      background:rgba(255,255,255,1);
      box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
      border-radius:10px;
      .line
        display flex
        align-items flex-start
        margin-bottom 20px
        .text,.value
          dpr-font(14Px)
          color #55545D
        .text
          flex 0 0 80px
          margin-right 20px
        .area
          padding 0
          height auto
          color #55545D
          dpr-font(14Px)
          outline none
          border none
      .btns
        display flex
        align-items center
        justify-content space-between
        border-top 1Px solid #F5F4F7
        height 40px
        .btn
          display flex
          align-items center
          justify-content center
          width:80px;
          height:25px;
          background:rgba(89,142,254,1);
          box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
          border-radius:10px;
          dpr-font(14px)
          color white
        .no
          background-color #009C4E

</style>
